// 封装defineReactive对单个数据进行数据劫持(数据劫持的核心)
function defineReactive(_data, key, value) {
  Object.defineProperty(_data, key, {
    get() {
      console.log("正在获取" + key + "的值");
      return value
    },
    set(newVal) {
      if (value === newVal) return
      console.log("正在设置" + key + "的值");
      value = newVal
    }
  })
}

// 封装一个observe函数,遍历this._data,将里面的值交给defineReactive进行响应式处理
function observe(_data) {
  for (let key of Object.keys(_data)) {
    defineReactive(_data, key, _data[key])
  }
}

// 1.封装一个Vue构造函数
function Vue(options) {
  // 将配置对象options中data的内容放在vm的_data中
  this._data = options.data
  // 开始数据代理,将_data中的数据拿出来放在vm身上
  for (let key of Object.keys(this._data)) {
    Object.defineProperty(this, key, {
      get() {
        return this._data[key]
      },
      set(newVal) {
        this._data[key] = newVal
      }
    })
  }
  // 拿到_data中的值进行数据劫持
  observe(this._data)
}

// 实例化Vue
const vm = new Vue({
  data: {
    count: 1,
    course: {
      type: "easy",
      name: "vue"
    }
  }
})

console.log(vm);
function get() {
  console.log(vm.count);
}

function set() {
  vm.count++
}

get()
set()
